<template>
	<view style="padding:  30rpx;">
		<view class="jdalBox flex flex-x-between flex-y-center flex-wrap">
			<view class="item" v-for="item in pageData.dataList" :key="item.id" @click="jump('/pages/jdAnli/detail?id='+item.id)">
				<image :src="config.baseUrl+ item.imgUrl" mode="widthFix"></image>
				<text>{{item.caseName}}</text>
			</view>
		</view>
		<noData v-if="pageData.dataList.length<=0"></noData>
		<uni-load-more v-else :status="pageData.status"></uni-load-more>
	</view>
</template>

<script setup>
	import config from '@/common/config.js'
	import {
		ref
	} from 'vue'
	import {
		caseList
	} from "@/api/index.js";
	const pageData = ref({
		dataList: [],
		status: 'noMore',
		pageSize: 10,
		pageNum: 1,
	})
	// 获取经典案例
	const caseListFn = (isRoll) => {
		// isRoll 是否滚动加载
		if (!isRoll) {
			pageData.value.pageNum = 1;
		}
		caseList({
			pageNum: pageData.value.pageNum,
			pageSize: pageData.value.pageSize
		}).then((res) => {
			if (res.code == 200) {
				pageData.value.dataList = res.rows;
				pageData.value.dataList = isRoll ? pageData.value.dataList.concat(res.rows) : res.rows;
			}
			if (res.rows.length < pageData.value.pageSize) {
				pageData.value.status = "noMore";
			}
		})
	}
	caseListFn();
	onReachBottom(() => {
		if (pageData.value.status == "noMore") return;
		pageData.value.pageSize += 1;
		caseListFn(true);
	})
	// 跳转
	const jump = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style lang="scss" scoped>
	.jdalBox {
		.item {
			width: 315rpx;
			text-align: center;
			font-size: 20rpx;
			color: #333;
			line-height: 60rpx;

			image {
				width: 100%;
				display: block;
			}
		}
	}
</style>